<template>
  <a-card :bordered="false" :loading="loading">
    <div class="w-full">
      <a-form :model="detailData" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="美食名称" name="name">
              <a-input v-model:value="detailData.name" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="封面" name="cover">
              <upload-image
                :image-str="detailData.cover"
                :component-props="{ maxCount: 1, disabled: true }"
              />
            </a-form-item>
          </a-col>
          <a-col :span="24" :pull="2">
            <a-form-item label="轮播图片" name="images">
              <upload-image
                :image-str="detailData.images"
                :component-props="{ maxCount: 5, disabled: true }"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <!--            <div class="inline-flex items-center whitespace-nowrap">-->
            <a-form-item label="分类" name="categoryId">
              <a-select
                v-model:value="detailData.categoryId"
                class="min-w-150px"
                allow-clear
                :options="typeList"
                placeholder="请选择分类"
                disabled
              ></a-select>
            </a-form-item>
            <!--            </div>-->
          </a-col>
          <a-col :span="12">
            <a-form-item label="排序" name="sort">
              <a-input v-model:value="detailData.sort" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="24" :pull="2">
            <a-form-item label="推荐餐厅" name="restaurantList">
              <a-space
                v-for="(restaurant, index) in detailData.restaurantList"
                :key="restaurant.id"
                style="display: flex; margin-bottom: 8px"
                align="baseline"
              >
                <a-form-item
                  :name="['restaurantList', index, 'name']"
                  :rules="{
                    required: true,
                    message: '请填写餐厅名',
                  }"
                >
                  <a-input
                    v-model:value="restaurant.name"
                    placeholder="餐厅名"
                    style="width: 300px"
                    disabled
                  />
                </a-form-item>
                <a-form-item
                  :name="['restaurantList', index, 'address']"
                  :rules="{
                    required: true,
                    message: '请填写餐厅地址',
                  }"
                >
                  <a-input
                    v-model:value="restaurant.address"
                    placeholder="餐厅地址"
                    style="width: 500px"
                    disabled
                  />
                </a-form-item>
              </a-space>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="发布时间" name="publishTime">
              <a-date-picker
                :value="formatToDateTime(detailData.publishTime, format)"
                :value-format="format"
                :format="format"
                show-time
                disabled
              />
            </a-form-item>
          </a-col>
          <a-col :span="24" :pull="1">
            <a-form-item
              label="介绍"
              name="introduce"
              :label-col="{ span: 3 }"
              :wrapper-col="{ span: 21 }"
            >
              <tinymce-editor
                v-model:value="detailData.introduce"
                placeholder="详细介绍"
                disabled
              ></tinymce-editor>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="创建时间" name="createTime">
              <a-date-picker
                :value="formatToDateTime(detailData.createTime, format)"
                :value-format="format"
                :format="format"
                show-time
                disabled
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="更新时间" name="updateTime">
              <a-date-picker
                :value="formatToDateTime(detailData.updateTime, format)"
                :value-format="format"
                :format="format"
                show-time
                disabled
              />
            </a-form-item>
          </a-col>
        </a-row>
        <!--          </a-row>-->
        <a-form-item :wrapper-col="{ span: 24 }">
          <div class="text-center">
            <a-button
              v-if="$auth('food-update')"
              class="mr-50px"
              type="primary"
              @click="router.push(`/food/foodEdit?id=${detailData.id}`)"
              >编辑</a-button
            >
            <a-button @click="closeTab">返回</a-button>
          </div>
        </a-form-item>
      </a-form>
    </div>
  </a-card>
</template>

<script setup lang="tsx">
  import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons-vue';
  import { message } from 'ant-design-vue';
  import DynamicForm from '@/components/dynamicForm/index.vue';
  import useRequestDetail from '@/hooks/useRequestDetail';
  import { foodApi, createFood, updateFood } from '@/api/food';
  import { useTabsViewStore } from '@/store/modules/tabsView';
  import { ComponentsTypeEnum } from '@/enums/componentsEnum';
  import { categoryJsonByType } from '@/api/category';
  import { categoryTypeEnum } from '@/enums/categoryTypeEnum';
  import { formatToDateTime } from '@/utils/dateUtil';

  defineOptions({
    name: 'foodDetail',
  });

  const format = 'YYYY-MM-DD HH:mm';
  const route = useRoute();
  const router = useRouter();
  const tabsViewStore = useTabsViewStore();
  const typeList = ref<{ id: number; name: string }[]>([]);
  const { detailData, loading } = useRequestDetail({
    apiKey: foodApi.foodDetail,
    initParams: route?.query,
    isMount: !!Object.values(route?.query).length && !!Object.values(route?.query)[0],
  });
  const submitForm = async (params) => {
    const foodId = route?.query?.id;
    const res = foodId
      ? await updateFood({
          ...params,
          id: foodId,
        })
      : await createFood(params);
    if (res) {
      message.success(res?.msg);
      closeTab();
    }
  };

  const closeTab = () => {
    tabsViewStore.closeCurrentTab(route);
  };

  const getCategoryList = async () => {
    const res = await categoryJsonByType({ type: categoryTypeEnum.FOOD });
    if (res) {
      typeList.value = res.data.map((item: { name: string; id: number }) => ({
        label: item.name,
        value: item.id,
      }));
    }
  };

  interface Restaurant {
    name: string;
    address: string;
    id: number;
  }

  const removeRestaurant = (item: Restaurant) => {
    const index = detailData.restaurantList.indexOf(item);
    if (index !== -1) {
      detailData.restaurantList.splice(index, 1);
    }
  };

  const addRestaurant = () => {
    detailData.restaurantList.push({
      name: '',
      address: '',
      id: Date.now(),
    });
  };

  onMounted(() => {
    getCategoryList();
  });
</script>

<style></style>
